<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					var name = $("#name").val();
					var password = $("#password").val();
					$.ajax({
						//表示请求的地址
						url:"http://localhost:8080/day11/ajaxServlet?username="+name+"&password="+password;
						//表示发送给服务器的数据
						data:"action=jQueryAjax",
						//表示请求的类型GET或POST
						type:"GET",
						//请求成功，响应的回调函数
						success:function (data) {
							$("#msg").html("编号："+data.id+",姓名："+data.name);

						},
						//响应的数据类型，常用的数据类型有
							//text：表示纯文本
							//xml：表示xml数据
							//json：表示json对象
						dataType:"json"
					})
				});
			});
		</script>
	</head>
	<body>
		<div>
			<button id="ajaxBtn">$.ajax请求</button>
		</div>
		<div id="msg"></div>
		<br/><br/>
		<form>
			用户名：<input name="username" id="name" type="text" /><br/>
			密码：<input name="password" id="password" type="password" /><br/>
		</form>
	</body>
</html>